<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="../../css/elementui.css">
    <link rel="stylesheet" href="../../css/user-cart.css">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css"/>
    <link href="../../css/user-style.css" rel="stylesheet">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
</head>
<body>
<div id="app">

    <div id="header">
        <!-- 顶部导航栏 -->
        <nav id="site-nav" role="navigation">
            <div class="workArea">
                <!-- 导航栏左半部分,如果取不到用户信息则显示如下： -->
                <span v-if="!login">
                    <span>喵，欢迎来天猫</span>
                    <span><a href="/pages/login.html">请登录</a></span>
                    <span><a href="/pages/user/regist.html">免费注册</a></span>
                </span>
                <!-- 如果用户成功登录，则显示如下： -->
                <span v-if="login">
                    <span>Hi，{{loginUser.name}}</span>
                    <!--积分是假数据-->
                    <span><a href="nowhere">积分 <strong>1325</strong></a></span>
                    <span @click="logout"><a href="#">退出</a></span>
                </span>
                <!-- 导航栏右半部分：使用Bootstrap的pull-right类 -->
                <span class="pull-right" v-if="login">
                    <a href="/pages/user/order.html">我的订单</a>
                    <a href="/pages/user/cart.html">
                        <span class="glyphicon glyphicon-shopping-cart redColor"></span>
                        购物车<strong id="cartTotalItemNumber">{{shopNum}}</strong>件
                    </a>
                </span>
            </div>
        </nav>
        <!--搜索框-->
        <div class="header">
            <div class="headerLayout workArea">
                <!-- 图片logo -->
                <div class="logo">
                    <a href="index.html">
                        <img src="../../img/tmall-logo.png">
                    </a>
                </div>
                <!-- 搜索框 -->
                <form class="mallSearch-input" action="/searchProduct">
                    <input name="keyword" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
                    <button type="button" class="searchButton" @click="searchGoods">搜索</button>
                    <ul class="hot-query">
                        <li>
                            <a href="searchProduct?keyword=针织衫">针织衫</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">连衣裙</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">四件套</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">摄像头</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">客厅灯</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">口红</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">手机</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">运动鞋</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">牛奶</a>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <div style="clear: both;"/>
    </div>

    <div id="main">
        <title>购物车</title>
        <div class="cartDiv">
            <div class="cartProductList">
                <table class="cartProductTable">
                    <thead>
                    <tr>
                        <!--选择框-->
                        <th><input type="checkbox" name="chb[]" id="all" onclick="setChecked(this)" @click="sumTotal"/>全选</th>
                        <th>商品信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th width="120px">金额</th>
                        <th class="operation">操作</th>
                    </tr>
                    </thead>
                    <tbody v-for="(g,index) in goodsDetail">
                    <tr class="cartProductItemTR">
                        <td>
                            <!--选择框-->
                            <input type="checkbox" name="chb[]" onclick="setChecked(this)" @click="sumTotal"/>
                            <!--主图-->
                            <img class="cartProductImg" :src="goodsMainImg[index]">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a :href="'/pages/user/goods.html?goodsId='+g.id"
                                   class="cartProductLink">{{g.titleShow}}</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img src="../../img/creditcard.png" title="支持信用卡支付">
                                    <img src="../../img/7day.png" title="消费者保障服务,承诺7天退货">
                                    <img src="../../img/promise.png" title="消费者保障服务,承诺如实描述">
                                </div>
                            </div>

                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">{{g.highPrice}}</span>
                            <span class="cartProductItemPromotionPrice">{{g.lowPrice}}</span>
                        </td>
                        <td>
                            <span class="orderItemProductNumber">{{carts[index].number}}</span>
                        </td>
                        <td>
                            <span class="cartProductItemSmallSumPrice">{{g.lowPrice*carts[index].number}}</span>
                        </td>
                        <td>
                            <a class="deleteOrderItem" href="#" @click="delCart(carts[index].id)">删除</a>
                        </td>
                    </tr>
                    </el-checkbox>
                    </tbody>

                </table>
            </div>

            <div class="cartFoot">
                <div class="pull-right">
                    <!--<form method="post" action="../alipay/alipay.trade.page.pay.jsp">-->
                    <!--<span>已选商品 <span class="cartSumNumber">0</span> 件</span>-->
                    <span>合计 (不含运费): </span>
                    <!--总金额-->
                    <span class="cartSumPrice">￥{{total}}</span>
                     <!--@click="submieSelect"-->
                    <!--<button class="createOrderButton" style="background-color:darkred" type="submit">结 算</button>-->
                    <button class="createOrderButton" style="background-color:darkred" @click="submieSelect">结 算</button>
                    <!--</form>-->

                </div>
            </div>
        </div>
    </div>

    <div id="footer" class="footer" style="display: block;">

        <div class="workArea">
            <div class="tmall-ensure">
                <a href="#nowhere">
                    <img src="../../img/footer1.png">
                    <img src="../../img/footer2.png">
                    <img src="../../img/footer3.png">
                    <img src="../../img/footer4.png">
                </a>
            </div>

            <div class="tmall-desc">
                <dl>
                    <dt><span>购物指南</span></dt>
                    <dd><a href="#nowhere">免费注册</a></dd>
                    <dd><a href="#nowhere">开通支付宝</a></dd>
                    <dd><a href="#nowhere">支付宝充值</a></dd>
                </dl>
                <dl>
                    <dt><span>天猫保障</span></dt>
                    <dd><a href="#nowhere">发票保障</a></dd>
                    <dd><a href="#nowhere">售后规则</a></dd>
                    <dd><a href="#nowhere">缺货赔付</a></dd>
                </dl>
                <dl>
                    <dt><span>支付方式</span></dt>
                    <dd><a href="#nowhere">快捷支付</a></dd>
                    <dd><a href="#nowhere">信用卡</a></dd>
                    <dd><a href="#nowhere">余额宝</a></dd>
                    <dd><a href="#nowhere">蚂蚁花呗</a></dd>
                    <dd><a href="#nowhere">货到付款</a></dd>
                </dl>
                <dl>
                    <dt><span>商家服务</span></dt>
                    <dd><a href="#nowhere">天猫规则</a></dd>
                    <dd><a href="#nowhere">商家入驻</a></dd>
                    <dd><a href="#nowhere">商家中心</a></dd>
                    <dd><a href="#nowhere">天猫智库</a></dd>
                    <dd><a href="#nowhere">物流服务</a></dd>
                    <dd><a href="#nowhere">喵言喵语</a></dd>
                    <dd><a href="#nowhere">运营服务</a></dd>
                </dl>
                <dl>
                    <dt><span>手机天猫</span></dt>
                    <dd><a href="#nowhere"><img src="../../img/qr-code.png"></a></dd>
                </dl>
            </div>

            <div style="clear:both"></div>
        </div>

        <div class="workArea">
            <img src="../../img/tmall-cat.png" class="tmall-cat">
        </div>
        <div class="tmall-copyright">
            <div class="workArea">
                <div class="mui-global-fragment-load">
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">关于天猫</a>
                        <a href="#nowhere">帮助中心</a>
                        <a href="#nowhere">开放平台</a>
                        <a href="#nowhere">诚聘英才</a>
                        <a href="#nowhere">联系我们</a>
                        <a href="#nowhere">网站合作</a>
                        <a href="#nowhere">法律声明</a>
                        <a href="#nowhere">知识产权</a>
                        <a href="#nowhere">廉正举报</a>
                        <a href="#nowhere">规则意见征集</a>
                    </div>
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">阿里巴巴集团</a><span class="slash">|</span>
                        <a href="#nowhere">淘宝网</a><span class="slash">|</span>
                        <a href="#nowhere">天猫</a><span class="slash">|</span>
                        <a href="#nowhere">聚划算</a><span class="slash">|</span>
                        <a href="#nowhere">全球速卖通</a><span class="slash">|</span>
                        <a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
                        <a href="#nowhere">1688</a><span class="slash">|</span>
                        <a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
                        <a href="#nowhere">飞猪</a><span class="slash">|</span>
                        <a href="#nowhere">阿里云计算</a><span class="slash">|</span>
                        <a href="#nowhere">AliOS</a><span class="slash">|</span>
                        <a href="#nowhere">阿里通信</a><span class="slash">|</span>
                        <a href="#nowhere">万网</a><span class="slash">|</span>
                        <a href="#nowhere">高德</a><span class="slash">|</span>
                        <a href="#nowhere">UC</a><span class="slash">|</span>
                        <a href="#nowhere">友盟</a><span class="slash">|</span>
                        <a href="#nowhere">虾米</a><span class="slash">|</span>
                        <a href="#nowhere">阿里星球</a><span class="slash">|</span>
                        <a href="#nowhere">来往</a><span class="slash">|</span>
                        <a href="#nowhere">钉钉</a><span class="slash">|</span>
                        <a href="#nowhere">支付宝</a>
                    </div>

                    <div class="footer-copyright">
                        增值电信业务经营许可证：<a href="#nowhere">浙B2-20110446</a>
                        网络文化经营许可证：<a href="#nowhere">浙网文[2015]0295-065号</a>
                        <a href="#nowhere">12318举报</a>
                        <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                        <br/>
                        互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2017-0005</a>
                        <a href="#nowhere"><img src="../../img/police-icon.png">浙公网安备 33010002000120号</a>
                        <span>（浙）网械平台备字[2018]第00002号</span>
                        <div class="copyRightYear">© 2003-2018 TMALL.COM 版权所有</div>
                        <div>
                            <img src="../../img/copyRight1.jpg">
                            <img src="../../img/copyRight2.jpg">
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
</div>

</body>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../../js/vue.js"></script>
<script src="../../js/elementui.js"></script>
<script src="../../js/axios.js"></script>
<!--jquery文件-->
<script type="text/javascript" src="../../plugins/jquery/jQuery-2.2.3.min.js"></script>
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!--bootstrap-->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- util.js文件 -->
<script type="text/javascript" src="../../js/util.js"></script>
<!-- 页面js文件 -->
<script type="text/javascript" src="../../js/user-cart.js"></script>
<script>
    function setChecked(obj)
    {
        const checks=[0];
        var chbs=document.getElementsByName("chb[]");//获取到复选框的名称
        //全选
        //JS的if判断中Undefined类型视为false，其他类型视为true；
        //obj.id是定义过的值，类型为非Undefined，所以视为true。
        if(obj.id)
        {
            if(obj.checked){
                for(let i=1;i<chbs.length;i++)
                {
                    //若全选框的结果为选中，则进行全选操作,否则进入下一步
                    //obj.checked表示复选框当前状态，已选为true，未选为false。
                    if(obj.checked == true)
                    {
                        //  console.log("aaa");
                        let chb = chbs[i];
                        chb.checked = true;
                    }
                    checks.splice(i-1,1,1);
                }
                console.log("all");
            }else{
                console.log("noone");
                //全不选
                for(let i=1;i<chbs.length;i++)
                {
                    //若全选框的结果为没选中，则进行全不选操作,否则进入下一步
                    if(obj.checked == false)
                    {
                        //  console.log("bbb");
                        let chb = chbs[i];
                        chb.checked = false;
                    }
                    checks.splice(i-1,1,0);
                }
            }
        }else
        {
            for(let i=1;i<chbs.length;i++){
                if(chbs[i].checked) checks.splice(i-1,1,1);
                else checks.splice(i-1,1,0);
            }

        }
        sessionStorage.setItem("checks",checks);
        console.log(checks);
    }
</script>

</html>